<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:disabled="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>声明式渲染</title>
    <!-- 1.引入本地资源-->
    <script src="../js/vue-dev.js"></script>
    <!-- 2.引入外部资源-->
    <!--<script src="https://unpkg.com/vue"></script>-->
</head>

<!--
                             模板语法
*  1、Vue.js使用了基于HTML的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例数据；
*  2、所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
*  3、在底层的实现上，Vue将 模板 编译成 虚拟DOM渲染函数 。结合 响应系统，在应用状态改变时，
*      Vue能够智能地计算出 重新渲染组件 的最小代价并应用到DOM操作上；
*  4、如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，
*      你也可以不用模板，直接写渲染（render）函数，使用可选的 JSX 语法。
-->
<body>
    <div id="app_value">
        {{msg_value}}
    </div>
    <div id="app_html" v-html="msg_html">
        <!-- 如果有v-html属性则不再显示内容 -->
    </div>



    <script>
/**
 *  1.文本
 *      1.1 数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值；
 *      1.2 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
 *          但请留心这会影响到该节点上所有的数据绑定；
 *  2.纯HTML
 *      2.1 双大括号会将数据解释为纯文本，而非 HTML 。
 *          为了输出真正的 HTML ，你需要使用 v-html 指令；
 */

        var app_value = new Vue({
            el:'#app_value',
            data:{
                msg_value:'显示纯文本，通过双大括号的形式',
            }
        })

        var app_html = new Vue({
            el:'#app_html',
            data:{
                msg_html:'<h1>在纯HTML下显示一级标题</h1>'
            }
        })


    </script>


    <div id="app_attribute">
        {{msg_attribute}}
        <br>
        <button disabled="disabled">Button</button>
    </div>

    <script>
/**
 *  3.属性(不对)
 *      3.1 使用v-bind进行属性的双向数据绑定，而非双大括号的形式；
 *      3.2 对布尔值的属性也有效
 */
        var app_attribute = new Vue({
            el:"#app_attribute",
            data:{
                msg_attribute:'成功的对标签的属性进行了数据绑定'
            }
        })

    </script>

</body>

</html>